import React, { memo,useEffect } from "react";
import "./Movie.css";
import { connect } from "react-redux";
import Scroll from "../../baseUI/scroll/index";
import { renderRoutes } from "react-router-config";


import * as actionTypes from "./store/actionCreators";

import { Page,PageTitle } from "../../assets/global-style";

import RotationChart from "../../components/movie/rotationChart/RotationChart";

const Movie = (props) => {
  //路由
  let { route } = props;
  


  const { moviestate } = props;
  const { rotationImg=[] } = moviestate;
  
  
  const { getMovieDataDispatch } = props;
  useEffect(() => {
    getMovieDataDispatch();
  }, []);

  

  return (
    <Page>
      <PageTitle>热度&影院</PageTitle>
      <Scroll direction={"vertical"} refresh={false}>
        <div>
        <RotationChart rotationImg={rotationImg} />
        </div>
      </Scroll>
      {/* 开启子路由 */}
      {renderRoutes(route.routes)}
    </Page>
  );
};

const mapStateToDispatch = (dispatch) => {
  return {
    getMovieDataDispatch() {
      dispatch(actionTypes.getMovieData());
    },
  };
};
const mapStateToProps = (state) => {
  return {
    moviestate: state.movie.moviedata,
  };
};

export default connect(mapStateToProps, mapStateToDispatch)(memo(Movie));
